<template>
  <div class="qrcode_container">
    <section class="toollist container">
      <el-menu default-active="2" class="el-menu-vertical-demo" collapse>
        <el-menu-item index="2">
          <i class="iconfont icon-click"></i>
          <span slot="title">选择工具</span>
        </el-menu-item>
        <el-submenu index="1" popper-class="submenu">
          <template slot="title">
            <i class="iconfont icon-view"></i>
          </template>
          <el-menu-item index="1-1">
            <i class="iconfont icon-square"></i>
            <span>矩形</span>
          </el-menu-item>
          <el-menu-item index="1-2">
            <i class="iconfont icon-triangle"></i>
            <span>三角形</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
          <i class="iconfont icon-text"></i>
          <span slot="title">文本</span>
        </el-menu-item>
      </el-menu>
    </section>
    <section class="template container">
      <div class="block data-standby">
        <header>
          <span>数据准备</span>
          <div
            :class="{
              'mode-change': true,
              importer: mode === 'importer'
            }"
            @click="changeMode"
          />
        </header>
        <section>
          <div v-if="current_template.length == 0" class="empty-status">
            <empty>请先选择模板</empty>
          </div>
          <div v-else class="fill-in">vvv</div>
        </section>
      </div>
      <div class="block template-list"></div>
    </section>
    <section ref="canvasContainer" class="visual container">
      <canvas
        ref="canvas"
        id="canvas"
        :width="canvas_size.offsetWidth"
        :height="canvas_size.offsetHeight"
      />
    </section>
    <section class="operation container">
      <span>操作容器</span>
      <StylesEditor
        v-if="isStyleEditShow"
        :style_settings="selectedModule"
        @onStyleChange="onStyleChange"
      ></StylesEditor>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Ref, Watch } from 'vue-property-decorator'
import { fabric } from 'fabric'
// 组件
import empty from '@/components/basic/empty.vue'
import WsFloatToolbox from '@/components/tool/ws-float-toolbox.vue'
import StylesEditor from '@/components/tool/ws-styles-edit.vue'
import NameplateModule from './modules/nameplate.vue'
import SlideSlot from '@/components/basic/SlideSlot.vue'
// 类型文件
import { SelectOptionsType } from '@/interface/ElementUI'
import { StyleListType } from './settings/template_settings'
import { Dictionary } from '@/interface/Basic'
@Component({
  components: {
    SlideSlot,
    empty,
    StylesEditor,
    NameplateModule,
    WsFloatToolbox
  }
})
class QrCode extends Vue {
  @Ref() canvasContainer!: HTMLElement
  @Ref() canvas!: HTMLCanvasElement
  // dataStandy
  mode: 'typewriter' | 'importer' = 'typewriter'
  current_template: string = ''
  message: SelectOptionsType<string> = [
    { label: '姓名', value: '用户1' },
    { label: '编号', value: '1234567' },
    { label: '部门', value: '生产部' },
    { label: '职位', value: '工程师' }
  ]
  canvas_size: Dictionary<number> = {
    offsetWidth: 0,
    offsetHeight: 0
  }
  qr_card_template: string = "'title qrcode' 'message qrcode'"
  selected_dom!: any
  selectedModule!: StyleListType
  isStyleEditShow: boolean = false
  @Watch('canvas_size', { deep: true })
  cs_handler(newVal: Dictionary<number>) {
    const { offsetHeight, offsetWidth } = newVal
    this.canvas.setAttribute('width', offsetWidth.toFixed())
    this.canvas.setAttribute('height', offsetHeight.toFixed())
  }
  mounted() {
    this.initFabricStyle()
    this.initCanvasDom()
    this.$nextTick(() => {
      this.initCanvasObjects()
    })
  }
  // 对 fabric 的一些配置进行自定义修改
  initFabricStyle() {
    fabric.Canvas.prototype.selectionColor = 'rgba(203, 224, 244, 0.4)'
    fabric.Canvas.prototype.selectionBorderColor = '#82C2E6'
    fabric.Canvas.prototype.selectionLineWidth = 2
    const fabric_base_object_options: Dictionary<any> = {
      borderColor: '#82C2E6',
      transparentCorners: false,
      cornerSize: 5,
      cornerColor: '#FFFFFF',
      cornerStrokeColor: '#82C2E6',
      rotatingPointOffset: 1
    }
    Object.keys(fabric_base_object_options).forEach(key => {
      fabric.Object.prototype[key as keyof fabric.Object] = fabric_base_object_options[key]
    })
    fabric.Object.prototype.controls.mtr.offsetY = -15
    fabric.Object.prototype.controls.mtr.cursorStyle = 'grabbing'
    fabric.Object.prototype.controls.mtr.withConnection = false
  }
  initCanvasDom() {
    const { width, height } = this.canvasContainer.getBoundingClientRect()
    this.canvas_size = {
      offsetWidth: width,
      offsetHeight: height
    }
  }
  initCanvasObjects() {
    const canvas = new fabric.Canvas('canvas')
    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 20,
      height: 20,
      angle: 45
    })
    var circle = new fabric.Circle({
      left: 100,
      top: 100,
      fill: 'red',
      radius: 20
    })
    const text = new fabric.IText('hello world', {
      left: 100,
      top: 100,
      originX: 'center',
      originY: 'center'
    })
    canvas.add(rect, circle, text)
  }
  generateScreenShotName() {
    return '截图-' + new Date().toLocaleString().replaceAll(/(\/)|(:)/g, '-') + '.jpg'
  }
  changeMode() {
    const cur_mode = this.mode
    this.mode = cur_mode === 'importer' ? 'typewriter' : 'importer'
  }
  onStyleChange(style: StyleListType) {
    this.$broadEmit('dom_be_edited')
    Object.keys(style).forEach(key => {
      this.selected_dom.style[key] = style[key as keyof StyleListType]
    })
  }
}
export default QrCode
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.qrcode_container {
  position: relative;
  box-sizing: border-box;
  padding: 10px 20px;
  height: 100%;
  #flex(row, flex-start, flex-start);
  #color(background-color, --primary-bg-color);
  .container {
    height: 100%;
    #color(color, --primary-text-color);
    #color(background-color, --module-bg-color);
  }
  .toollist {
    .el-menu {
    }
  }
  .template {
    box-sizing: border-box;
    padding: 10px;
    width: 300px;
    #flex-start(column, flex-start);
    .block {
      box-sizing: border-box;
      padding: 10px;
      width: 100%;
      border: solid 1px;
      #color(border-color, --primary-border-color);
      #shadow-color(0, 0, 4px, 0, --primary-shadow-color);
    }
    .data-standby {
      margin-bottom: 10px;
      #flex-start(column, flex-start);
      header {
        box-sizing: border-box;
        padding-bottom: 5px;
        margin-bottom: 5px;
        width: 100%;
        border-bottom: solid 1px;
        #flex-center(row, center);
        justify-content: space-between;
        #color(border-color, --primary-border-color);
        .mode-change {
          box-sizing: border-box;
          position: relative;
          padding: 6px;
          height: 30px;
          width: 80px;
          border-radius: 5px;
          box-shadow: inset 0 0 4px #929292;
          transition: all 0.2s ease;
          cursor: pointer;
          #color(background-color, --lighter-text-color);
        }
        .mode-change::before {
          content: '手输';
          position: absolute;
          top: 12%;
          bottom: 12%;
          left: 5%;
          display: block;
          width: 40px;
          // height: 20px;
          border-radius: 4px;
          font-size: 12px;
          transition: all 0.2s ease;
          #flex-center(row, center);
          #color(color, --primary-text-color);
          #color(background-color, --module-bg-color);
        }
        .importer::before {
          content: '导入';
          left: 100%;
          transform: translateX(-112%);
        }
      }
      section {
        width: 100%;
        min-height: 200px;
        .empty-status {
          transform: scale(0.8);
          /deep/.empty-box {
            span {
              #color(color, --primary-text-color);
            }
          }
        }
      }
    }
    .template-list {
      flex: 1;
    }
  }
  .visual {
    flex: 1;
    position: relative;
    background: -webkit-linear-gradient(top, transparent 1px, #adadad 2px),
      -webkit-linear-gradient(left, transparent 1px, #adadad 2px);
    background-size: 0.1px 0.1px;
    overflow: hidden;
    #flex-center(row, center);
    #color(background-color, --gray-module-bg-color);
    .canvas-container {
      width: 100% !important;
      height: 100% !important;
    }
  }
  .operation {
    width: 300px;
  }
  .test {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    .template {
      margin: 10px;
      overflow: hidden;
    }
    .template1 {
      box-sizing: border-box;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: solid 1px #e7e7e7;
      border-radius: 12px;
    }
    .template2 {
      box-sizing: border-box;
      padding-left: 10px;
      border: solid 1px #e7e7e7;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .message {
        width: 120px;
        height: 120px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        .item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
/deep/.submenu {
  .el-menu--popup {
    width: 100px;
    min-width: 100px !important;
  }
}
</style>
